document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('dishForm');
    const successMessage = document.getElementById('successMessage');

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        // 重置错误状态
        resetErrors();

        // 验证字段
        let isValid = true;

        // 验证菜品名称
        const dishName = document.getElementById('dishName').value.trim();
        if (dishName === '') {
            showError('nameError', 'dishName');
            isValid = false;
        }

        // 验证菜品类别
        const dishCategory = document.getElementById('dishCategory').value;
        if (dishCategory === '') {
            showError('categoryError', 'dishCategory');
            isValid = false;
        }

        // 验证价格
        const dishPrice = document.getElementById('dishPrice').value.trim();
        if (dishPrice === '' || isNaN(dishPrice) || parseFloat(dishPrice) <= 0) {
            showError('priceError', 'dishPrice');
            isValid = false;
        }

        // 验证描述
        const dishDescription = document.getElementById('dishDescription').value.trim();
        if (dishDescription === '') {
            showError('descriptionError', 'dishDescription');
            isValid = false;
        }

        if (isValid) {
            // 表单验证通过，可以提交数据
            console.log('表单数据:', {
                name: dishName,
                category: dishCategory,
                price: dishPrice,
                description: dishDescription
            });

            // 显示成功消息
            successMessage.style.display = 'block';
            form.reset();

            // 3秒后隐藏成功消息
            setTimeout(() => {
                successMessage.style.display = 'none';
            }, 3000);
        }
    });

    function showError(errorElementId, inputElementId) {
        const errorElement = document.getElementById(errorElementId);
        const inputElement = document.getElementById(inputElementId);

        errorElement.style.display = 'block';
        inputElement.classList.add('error');
    }

    function resetErrors() {
        const errorMessages = document.querySelectorAll('.error-message');
        const inputs = document.querySelectorAll('input, select, textarea');

        errorMessages.forEach(msg => {
            msg.style.display = 'none';
        });

        inputs.forEach(input => {
            input.classList.remove('error');
        });

        successMessage.style.display = 'none';
    }

    // 为输入框添加实时验证
    document.getElementById('dishName').addEventListener('input', function() {
        if (this.value.trim() !== '') {
            this.classList.remove('error');
            document.getElementById('nameError').style.display = 'none';
        }
    });

    document.getElementById('dishCategory').addEventListener('change', function() {
        if (this.value !== '') {
            this.classList.remove('error');
            document.getElementById('categoryError').style.display = 'none';
        }
    });

    document.getElementById('dishPrice').addEventListener('input', function() {
        const value = this.value.trim();
        if (value !== '' && !isNaN(value) && parseFloat(value) > 0) {
            this.classList.remove('error');
            document.getElementById('priceError').style.display = 'none';
        }
    });

    document.getElementById('dishDescription').addEventListener('input', function() {
        if (this.value.trim() !== '') {
            this.classList.remove('error');
            document.getElementById('descriptionError').style.display = 'none';
        }
    });
});